<template>
    <div class="feedback">
        <a class="feedback-text" href="javascript:void(0)" @click="feedbackDialogVisible = true">反馈</a>
        <tt-dialog title="意见反馈" size="tiny" v-model="feedbackDialogVisible">
            <div class="content">
                <p class="label">联系方式（必填）</p>
                <div class="input-group">
                    <input class="email" placeholder="您的邮箱/QQ号" type="text" v-model="feedbackEmail">
                </div>
                <p class="label">您的意见（必填）</p>
                <div class="input-group">
                    <textarea v-model="feedbackContent" class="text" maxlength="140" placeholder="请填写您的意见，不超过140字"></textarea>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
        <tt-button @click="feedbackDialogVisible = false">取消</tt-button>
        <tt-button class="submit" type="primary" @click="submit" :disabled="isSubmitDisabled">确认</tt-button>
      </span>
        </tt-dialog>
    </div>
</template>
<script>
  import reqwest from 'reqwest';
  import Cookies from 'js-cookie';

  const msg = {
    'success': '已提交,感谢您的意见',
    'fail': '提交错误,请稍后重试',
    'mail_error': '请输入正确的联系方式',
    'content_error' : '请输入您的意见',
    'content_length_error' : '意见长度超出限制'
  };

  export default {
    name: 'Feedback',
    props: {
      show: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        feedbackDialogVisible: false,
        feedbackEmail: '',
        feedbackContent: '',
        isSubmitDisabled: false
      };
    },
    methods: {
      submit () {
        const self = this;
        const email = self.feedbackEmail,
          content = self.feedbackContent;

        if (email.length < 5) {
          self.$Toast(msg['mail_error']);
          document.querySelector('.feedback .email').focus();
          return;
        }
        if (content.trim() === '') {
          self.$Toast(msg['content_error']);
          document.querySelector('.feedback .text').focus();
          return;
        }

        self.isSubmitDisabled = true;
        reqwest({
          headers: {'X-CSRFToken': Cookies.get('csrftoken')},
          url: '/post_message/',
          method: 'post',
          data: {
            appkey: 'web',
            uuid: email,
            content: `[${window.location.host}]${content}`
          },
          success: (rs) => {
            if (rs && rs.message === 'success') {
              self.feedbackEmail = '';
              self.feedbackContent = '';

              self.feedbackDialogVisible = false;
            } else {
              self.$Toast(msg['fail']);
            }
          },
          error: () => {
            self.$Toast(msg['fail']);
          },
          complete: () => {
            self.isSubmitDisabled = false;
          }
        });
      }
    },
    created () {
      this.feedbackDialogVisible = this.show;
    }
  };
</script>
<style lang="less">
    .feedback {
        .label {
            margin-bottom: 5px;
            color: #333;
        }
        .email, .text {
            border-radius: 4px;
            border: 1px solid #d7d7d7;
            color: #5e5e5e;
            width: 100%;
            padding: 0;
            outline: none;
            padding: 5px 10px;
            resize: none;
        }
        .email {
            margin-bottom: 5px;
        }
        .text {
            height: 100px;
        }
    }
</style>


// WEBPACK FOOTER //
// feedback.vue?67966010